<template>
    <div>
        <div class="root-inner">
           <div>
            <router-link to="/">
                <img src="/static/pic/logo.png" class="pic">
            </router-link>
           </div>
           <div class="search">
               <span class="fa fa-search"></span>
               <input 
                type="text" 
                placeholder="请输入楼盘的名称" 
                @input="wordChange"
                v-model="searchname"
               >
           </div>
           <div class="bb">
               <span class="fa fa-list txt"></span>
           </div>
        </div> 

        <!--搜索到的房子列表-->
        <div class="main">
                <div v-for="h in houselist" >
                    <router-link :to="'/houseinfo/'+h._id">
                        <div class="housemenu">
                            <div><img :src="h.img" class="pic1"></div>
                            <div class="msg">
                                <p class="text2">{{h.title}}</p>
                                <p>
                                    <span class="text">{{h.address}}</span>
                                    <span class="text1">{{h.price}}</span>
                                </p>
                                <p class="text">{{h.jiedao}}</p>
                                <p  class="text1">{{h.jieshao}}</p>
                            </div>
                        </div>
                    </router-link>
                </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    export default{
        data:function(){
            return {
                searchname:"",
                houselist:[]
            }
        },
        methods:{
             wordChange:function(){
                 
                if(this.timer){
                    clearTimeout(this.timer);
                    this.timer=null;
                }
                this.timer =setTimeout(function(){
                    if(this.searchname){
                        this.http.post("/house/search",{word:this.searchname})
                        .then(res=>{
                            // console.dir(res);
                              this.houselist = res.data.data;
                        });
                    }
                }.bind(this),700);
                // console.log(123)
            },
        }
    }
</script>

<style scoped>
.root{
    height: 44px;
    line-height: 44px;
}
.root-inner{
    display: flex;
    background-color: #FF6900;
    height: 44px;
}
.pic{
    width: 57px;
    height: 20px;
    margin: 12px 8px;
}
.search{
    /*border: 1px solid black;*/
    width: 60%;
    height: 30px;
    line-height: 30px;
    margin-top: 7px;
    background-color: white;
    border-radius: 4px;
    padding-left: 4px;
    color: #999999;
}
.search input{
    width: 85%;
    border: none;
    font-size: 12px;
    color: #999999;
    padding-left: 10px;
}
.bb{
    margin-left:20px;
    color: white;
    line-height: 44px;
}
.housemenu{
    display: flex;
    padding: 8px 10px;
}
.housemenu p{
    margin: 0;
}
.msg{
    margin-left: 10px;
}
.pic1{
    width: 100px;
    height: 75px;
}
.text{
    color: #666666;
    font-size: 12px;
}
.text1{
    color: #f50;
    font-size: 12px;
}
.text2{
    font-size: 14px;
}
.main{
    overflow-y: scroll;
    height:100Vh;
}
.main a{
    text-decoration: none;
}
</style>